<!-- <template>
    为echarts准备一个具备大小的容器dom-->   <!--
    <div id="chartFirst" style="width: 100%;height: 100%;"></div>
  </template>
   
  <script>
  import echarts from 'echarts'
   
  export default {
    name: 'chartFirst',
    data () {
      return {
      }
    },
    methods:{
      drawPie(id){
        //在提示信息中显示
        const schema = [
          {name: 'Department', index: 0, text: '部门', unit: ''},
          {name: 'Effect', index: 1, text: '作用', unit: ''},
          {name: 'State', index: 2, text: '状态', unit: ''}
        ];
        //初始化
        this.charts = echarts.init(document.getElementById(id))
        this.charts.setOption({
   
          xAxis: {
            splitLine: {   //坐标轴内竖线
              lineStyle: {
                color:null,  //没有颜色即不显示
              }
            },
            axisLine: {    //直角坐标系x轴
              show:false,
              lineStyle: {   //为了不让轴上的数字显现
                color:null,
              }
            }
          },
          yAxis: {
            splitLine: {    //坐标轴内横线
              lineStyle: {
                color:null,  //没有颜色即不显示
              }
            },
            axisLine: {    //直角坐标系y轴
              show:false,
              lineStyle: {  //为了不让轴上的数字显现
                color:null,
              }
            }
          },
          // 标题
          title: {
            // text: 'Anscombe\'s quartet',
            left: 'center',
            top: 0
          },
          tooltip: {   //触发提示框
            trigger: 'item',  //触发器
          // formatter: '{a}: ({c})', //触发器触发时显示的内容，'({c})'为坐标
            formatter: function (obj) {
              var value = obj.value;
              return schema[0].text + '：' + value[2] + '<br>'
              +schema[1].text + '：' + value[3] + '<br>'
              +schema[2].text + '：' + value[4] + '<br>'
            }
          },
          
          series: [{
            symbol:'rectangle',  // 点的图形：长方形，若不写默认为圆
            symbolSize: 60,   //点的大小
            color:'white',    //点的颜色
            itemStyle: {
              normal: {
                // opacity: 0.001, //图元以及其附属物（如文字标签）的透明度
              }
            },
   
     
            data: [           //点的位置（坐标轴范围最大与最小根据数据本身的范围自动定）
              [0,0,'部门0','开始0','启用0'],
              [50,80,'部门1','开始1','启用1'],
              [50,20,'部门2','开始2','启用2'],
              [20,40,'部门3','开始3','启用3'],
              [80,40,'部门4','开始4','启用4'],
              [20,60,'部门5','开始5','启用5'],
              [80,60,'部门6','开始6','启用6'],
              [100,100,'部门7','开始7','启用7'],
            ],
            type: 'scatter'    //鼠标放到点上时鼠标的样式(此处为小手)。同 css 的鼠标样式，默认 'default'。
          }]
        })
      }
    },
    //调用
    mounted(){
      this.$nextTick(function() {
        this.drawPie('chartFirst')
      })
    }
  }
  </script>
  -->